<div [dMovable]="true" [handle]="header" [moveEl]="parent">
  <div class="modal-header" #header>
    <d-row [dGutter]="[12, 12]">
      <d-col [dSpan]="22"> {{ 'datadev.job' | translate }}{{ 'datadev.job.crontab.setting' | translate }} </d-col>
      <d-col [dSpan]="2" style="text-align: right">
        <d-button
          icon="icon-close"
          bsStyle="text-dark"
          title="{{ 'app.common.operate.close.label' | translate }}"
          (btnClick)="data.onClose()"
        ></d-button>
      </d-col>
    </d-row>
  </div>
  <div class="modal-body" style="padding: 0px 36px 0px 36px">
    <d-row [dGutter]="[12, 12]">
      <d-tabs [type]="'pills'" (activeTabChange)="activeTabChange($event)">
        <d-tab id="custom" title="{{ 'datadev.job.crontab.custom' | translate }}">
          <ng-template dTabContent>
            {{ 'datadev.job.crontab.custom' | translate }}:
            <input dTextInput id="textInput" style="width: 80%" [(ngModel)]="crontabStr" (blur)="buildCrontab()" />
          </ng-template>
        </d-tab>
        <d-tab id="minute" title="{{ 'datadev.job.crontab.minute' | translate }}">
          <ng-template dTabContent>
            <d-radio-group [direction]="'column'" [(ngModel)]="cron_minute.type" (change)="buildCrontab()">
              <d-radio [value]="1"> {{ 'datadev.job.crontab.every' | translate }}{{ 'datadev.job.crontab.minute' | translate }} </d-radio>
              <d-radio [value]="2">
                {{ 'datadev.job.crontab.range' | translate }}:{{ 'datadev.job.crontab.range.from' | translate }}
                <d-input-number
                  [(ngModel)]="cron_minute.intervalFrom"
                  [min]="cron_minute.min"
                  [max]="cron_minute.max"
                  [disabled]="cron_minute.type != 2"
                  (ngModelChange)="buildCrontab()"
                ></d-input-number>
                {{ 'datadev.job.crontab.range.to' | translate }}
                <d-input-number
                  [(ngModel)]="cron_minute.intervalTo"
                  [min]="cron_minute.min"
                  [max]="cron_minute.max"
                  [disabled]="cron_minute.type != 2"
                  (ngModelChange)="buildCrontab()"
                ></d-input-number>
                {{ 'datadev.job.crontab.minute' | translate }}
              </d-radio>
              <d-radio [value]="3">
                {{ 'datadev.job.crontab.loop' | translate }}:{{ 'datadev.job.crontab.loop.from' | translate }}
                <d-input-number
                  [(ngModel)]="cron_minute.loopFrom"
                  [min]="cron_minute.min"
                  [max]="cron_minute.max"
                  [disabled]="cron_minute.type != 3"
                  (ngModelChange)="buildCrontab()"
                ></d-input-number>
                {{ 'datadev.job.crontab.minute' | translate }}{{ 'datadev.job.crontab.loop.to' | translate }}
                <d-input-number
                  [(ngModel)]="cron_minute.loopTo"
                  [min]="cron_minute.min"
                  [max]="cron_minute.max"
                  [disabled]="cron_minute.type != 3"
                  (ngModelChange)="buildCrontab()"
                >
                </d-input-number>
                {{ 'datadev.job.crontab.minute' | translate }}{{ 'datadev.job.crontab.loop.times' | translate }}
              </d-radio>
              <d-radio [value]="4">
                {{ 'datadev.job.crontab.designated' | translate }}:
                <d-select
                  class="inline-input"
                  [options]="minutes"
                  [multiple]="true"
                  [(ngModel)]="cron_minute.custom"
                  [disabled]="cron_minute.type != 4"
                  [isSelectAll]="true"
                  (valueChange)="buildCrontab()"
                >
                </d-select>
              </d-radio>
            </d-radio-group>
          </ng-template>
        </d-tab>
        <d-tab id="hour" title="{{ 'datadev.job.crontab.hour' | translate }}">
          <ng-template dTabContent>
            <d-radio-group [direction]="'column'" [(ngModel)]="cron_hour.type" (change)="buildCrontab()">
              <d-radio [value]="1"> {{ 'datadev.job.crontab.every' | translate }}{{ 'datadev.job.crontab.hour' | translate }} </d-radio>
              <d-radio [value]="2">
                {{ 'datadev.job.crontab.range' | translate }}:{{ 'datadev.job.crontab.range.from' | translate }}
                <d-input-number
                  [(ngModel)]="cron_hour.intervalFrom"
                  [min]="cron_hour.min"
                  [max]="cron_hour.max"
                  [disabled]="cron_hour.type != 2"
                  (ngModelChange)="buildCrontab()"
                ></d-input-number>
                {{ 'datadev.job.crontab.range.to' | translate }}

                <d-input-number
                  [(ngModel)]="cron_hour.intervalTo"
                  [min]="cron_hour.min"
                  [max]="cron_hour.max"
                  [disabled]="cron_hour.type != 2"
                  (ngModelChange)="buildCrontab()"
                ></d-input-number>
                {{ 'datadev.job.crontab.hour' | translate }}
              </d-radio>
              <d-radio [value]="3">
                {{ 'datadev.job.crontab.loop' | translate }}:{{ 'datadev.job.crontab.loop.from' | translate }}
                <d-input-number
                  [(ngModel)]="cron_hour.loopFrom"
                  [min]="cron_hour.min"
                  [max]="cron_hour.max"
                  [disabled]="cron_hour.type != 3"
                  (ngModelChange)="buildCrontab()"
                ></d-input-number>
                {{ 'datadev.job.crontab.hour' | translate }}{{ 'datadev.job.crontab.loop.to' | translate }}
                <d-input-number
                  [(ngModel)]="cron_hour.loopTo"
                  [min]="cron_hour.min"
                  [max]="cron_hour.max"
                  [disabled]="cron_hour.type != 3"
                  (ngModelChange)="buildCrontab()"
                >
                </d-input-number>
                {{ 'datadev.job.crontab.hour' | translate }}{{ 'datadev.job.crontab.loop.times' | translate }}
              </d-radio>
              <d-radio [value]="4">
                {{ 'datadev.job.crontab.designated' | translate }}:
                <d-select
                  class="inline-input"
                  [options]="hours"
                  [multiple]="true"
                  [(ngModel)]="cron_hour.custom"
                  [disabled]="cron_hour.type != 4"
                  [isSelectAll]="true"
                  (valueChange)="buildCrontab()"
                >
                </d-select>
              </d-radio>
            </d-radio-group>
          </ng-template>
        </d-tab>
        <d-tab id="day" title="{{ 'datadev.job.crontab.day' | translate }}">
          <ng-template dTabContent>
            <d-radio-group [direction]="'column'" [(ngModel)]="cron_day.type" (change)="buildCrontab()">
              <d-radio [value]="0"> {{ 'datadev.job.crontab.undesignated.day' | translate }}</d-radio>
              <d-radio [value]="1"> {{ 'datadev.job.crontab.every' | translate }}{{ 'datadev.job.crontab.day' | translate }} </d-radio>
              <d-radio [value]="2"> {{ 'datadev.job.crontab.lastday' | translate }} </d-radio>
              <d-radio [value]="3">
                {{ 'datadev.job.crontab.range' | translate }}:{{ 'datadev.job.crontab.range.from' | translate }}
                <d-input-number
                  [(ngModel)]="cron_day.intervalFrom"
                  [min]="cron_day.min"
                  [max]="cron_day.max"
                  [disabled]="cron_day.type != 3"
                  (ngModelChange)="buildCrontab()"
                ></d-input-number>
                {{ 'datadev.job.crontab.range.to' | translate }}
                <d-input-number
                  [(ngModel)]="cron_day.intervalTo"
                  [min]="cron_day.min"
                  [max]="cron_day.max"
                  [disabled]="cron_day.type != 3"
                  (ngModelChange)="buildCrontab()"
                ></d-input-number>
                {{ 'datadev.job.crontab.day' | translate }}
              </d-radio>
              <d-radio [value]="4">
                {{ 'datadev.job.crontab.loop' | translate }}:{{ 'datadev.job.crontab.loop.from' | translate }}
                <d-input-number
                  [(ngModel)]="cron_day.loopFrom"
                  [min]="cron_day.min"
                  [max]="cron_day.max"
                  [disabled]="cron_day.type != 4"
                  (ngModelChange)="buildCrontab()"
                ></d-input-number>
                {{ 'datadev.job.crontab.day' | translate }}{{ 'datadev.job.crontab.loop.to' | translate }}
                <d-input-number
                  [(ngModel)]="cron_day.loopTo"
                  [min]="cron_day.min"
                  [max]="cron_day.max"
                  [disabled]="cron_day.type != 4"
                  (ngModelChange)="buildCrontab()"
                >
                </d-input-number>
                {{ 'datadev.job.crontab.day' | translate }}{{ 'datadev.job.crontab.loop.times' | translate }}
              </d-radio>
              <d-radio [value]="5">
                {{ 'datadev.job.crontab.designated' | translate }}:
                <d-select
                  class="inline-input"
                  [options]="days"
                  [multiple]="true"
                  [(ngModel)]="cron_day.custom"
                  [disabled]="cron_day.type != 5"
                  [isSelectAll]="true"
                  (valueChange)="buildCrontab()"
                >
                </d-select>
              </d-radio>
            </d-radio-group>
          </ng-template>
        </d-tab>
        <d-tab id="month" title="{{ 'datadev.job.crontab.month' | translate }}">
          <ng-template dTabContent>
            <d-radio-group [direction]="'column'" [(ngModel)]="cron_month.type" (change)="buildCrontab()">
              <d-radio [value]="1"> {{ 'datadev.job.crontab.every' | translate }}{{ 'datadev.job.crontab.month' | translate }} </d-radio>
              <d-radio [value]="2">
                {{ 'datadev.job.crontab.range' | translate }}:{{ 'datadev.job.crontab.range.from' | translate }}
                <d-input-number
                  [(ngModel)]="cron_month.intervalFrom"
                  [min]="cron_month.min"
                  [max]="cron_month.max"
                  [disabled]="cron_month.type != 2"
                  (ngModelChange)="buildCrontab()"
                ></d-input-number>
                {{ 'datadev.job.crontab.range.to' | translate }}
                <d-input-number
                  [(ngModel)]="cron_month.intervalTo"
                  [min]="cron_month.min"
                  [max]="cron_month.max"
                  [disabled]="cron_month.type != 2"
                  (ngModelChange)="buildCrontab()"
                ></d-input-number>
                {{ 'datadev.job.crontab.month' | translate }}
              </d-radio>
              <d-radio [value]="3">
                {{ 'datadev.job.crontab.loop' | translate }}:{{ 'datadev.job.crontab.loop.from' | translate }}
                <d-input-number
                  [(ngModel)]="cron_month.loopFrom"
                  [min]="cron_month.min"
                  [max]="cron_month.max"
                  [disabled]="cron_month.type != 3"
                  (ngModelChange)="buildCrontab()"
                ></d-input-number>
                {{ 'datadev.job.crontab.month' | translate }}{{ 'datadev.job.crontab.loop.to' | translate }}
                <d-input-number
                  [(ngModel)]="cron_month.loopTo"
                  [min]="cron_month.min"
                  [max]="cron_month.max"
                  [disabled]="cron_month.type != 3"
                  (ngModelChange)="buildCrontab()"
                >
                </d-input-number>
                {{ 'datadev.job.crontab.month' | translate }}{{ 'datadev.job.crontab.loop.times' | translate }}
              </d-radio>
              <d-radio [value]="4">
                {{ 'datadev.job.crontab.designated' | translate }}:
                <d-select
                  class="inline-input"
                  [options]="months"
                  [multiple]="true"
                  [(ngModel)]="cron_month.custom"
                  [disabled]="cron_month.type != 4"
                  [isSelectAll]="true"
                  (valueChange)="buildCrontab()"
                >
                </d-select>
              </d-radio>
            </d-radio-group>
          </ng-template>
        </d-tab>
        <d-tab id="week" title="{{ 'datadev.job.crontab.week' | translate }}">
          <ng-template dTabContent>
            <d-radio-group [direction]="'column'" [(ngModel)]="cron_week.type" (change)="buildCrontab()">
              <d-radio [value]="0"> {{ 'datadev.job.crontab.undesignated.week' | translate }} </d-radio>
              <d-radio [value]="1"> {{ 'datadev.job.crontab.every' | translate }}{{ 'datadev.job.crontab.week' | translate }} </d-radio>
              <d-radio [value]="2">
                {{ 'datadev.job.crontab.range' | translate }}:{{ 'datadev.job.crontab.range.from' | translate
                }}{{ 'datadev.job.crontab.week' | translate }}
                <d-input-number
                  [(ngModel)]="cron_week.intervalFrom"
                  [min]="cron_week.min"
                  [max]="cron_week.max"
                  [disabled]="cron_week.type != 2"
                  (ngModelChange)="buildCrontab()"
                ></d-input-number>
                {{ 'datadev.job.crontab.range.to' | translate }}{{ 'datadev.job.crontab.week' | translate }}
                <d-input-number
                  [(ngModel)]="cron_week.intervalTo"
                  [min]="cron_week.min"
                  [max]="cron_week.max"
                  [disabled]="cron_week.type != 2"
                  (ngModelChange)="buildCrontab()"
                ></d-input-number>
              </d-radio>
              <d-radio [value]="3">
                {{ 'datadev.job.crontab.designated' | translate }}:
                <d-select
                  class="inline-input"
                  [options]="weeks"
                  [multiple]="true"
                  [(ngModel)]="cron_week.custom"
                  [disabled]="cron_week.type != 3"
                  [isSelectAll]="true"
                  (valueChange)="buildCrontab()"
                >
                </d-select>
              </d-radio>
            </d-radio-group>
          </ng-template>
        </d-tab>
      </d-tabs>
    </d-row>
    <d-row [dGutter]="[12, 12]">
      <d-alert [type]="'simple'" style="width: 100%; text-align: center" [closeable]="false">
        {{ 'datadev.job.crontab.full' | translate }}<br />
        <p style="font-weight: bold">{{ crontabStr }}</p>
      </d-alert>
    </d-row>
    <d-row [dGutter]="[12, 12]">
      <d-alert [type]="'simple'" style="width: 100%; text-align: center" [closeable]="false">
        {{ 'datadev.job.crontab.next5' | translate }}<br /><span *ngFor="let fireTime of fireTimeList"
          >{{ fireTime | date: 'yyyy-MM-dd HH:mm:ss' }}<br
        /></span>
      </d-alert>
    </d-row>
  </div>
  <div class="modal-footer" style="text-align: right; padding-right: 36px">
    <d-form-operation>
      <d-button style="margin-right: 4px" bsStyle="common" (btnClick)="data.onClose($event)">{{
        'app.common.operate.cancel.label' | translate
      }}</d-button>
      <d-button bsStyle="primary" (btnClick)="submitForm()">{{ 'app.common.operate.confirm.label' | translate }}</d-button>
    </d-form-operation>
  </div>
</div>
